<template>
  <scroll-handle>
    <div class="change-img" @mouseover="mouseenterHander()" @mouseleave="mouseLeaveHander()">
      <div class="case-name">{{ caseTypeStr }} 
        <!-- <div class="lit-num">
        {{ imgList.length }}
        </div>  -->
      </div>
      <div v-for="(item,index) in imgList" :key="index" v-show="imgIndex == index" class="bgimg">
        <el-image class="imgstyle" :src="baseApi + item.coverImg" fit="cover" />
      </div>
     
    </div>
  </scroll-handle>
</template>

<script>
import scrollHandle from "@/components/scrollHandle.vue";


export default {
  name: "LightWebChangeImages",
  components: {
    scrollHandle,
  },
  props: {
    caseTypeStr:{
      style: String,
      default: ''
    },
    imgList: {
      style: Array,
      default: ()=>{
        return []
      }
    }
  },
  data() {
    return {
      imgIndex: 0,
      timer: null,
      baseApi : process.env.VUE_APP_IMGADDRESS
    };
  },

  mounted() {

  },

  methods: {
    mouseenterHander() {
      if (!this.timer) {
        this.timer = setInterval(() => {
          this.imgIndex = this.imgIndex == this.imgList.length-1 ? 0 : this.imgIndex + 1;
        }, 200);
      }
    },
    mouseLeaveHander() {
      clearInterval(this.timer);
      this.timer = null;
    },
  },
};
</script>
<style lang="scss" scoped>
.change-img {
  width: 100%;
  height: 100%;
}

.bgimg {
  width: 100%;
  height: 450px;
  max-height: 450px;
}

.imgstyle {
  width: 100%;
  height: 450px;
}
.case-name{
  font-family: "BebasFontB";
  font-size: 44px;
  padding-bottom: 40px;
  display: flex;
}
.lit-num{
  padding-left: 10px;
  font-size: 24px;
}
</style>